<template>
  <div class="page">
    <div class="inner w-1400">
      <div class="banner-box">
        <div class="lunbo-box">
          <el-carousel trigger="click" :autoplay="true">
            <el-carousel-item
              v-for="(item, index) in banner_list"
              :key="index"
              @click.native="do_banner_click(item)"
            >
              <img :src="item.image" alt="" />
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>

      <div class="category-box filter-box sort-wrap" style="margin-top: 16px">
        <div class="filter-item">
          <!-- <div class="label">产品排序</div> -->
          <div class="val" style="padding: 0">
            <div class="sort-box">
              <div
                class="item"
                v-for="(item, index) in sortList"
                :key="index"
                :class="orderByColumn == item.ziduan ? 'active' : ''"
                @click="onClickSort(item)"
              >
                <div class="text">{{ item.title }}</div>
                <div
                  class="sanjiao-box"
                  v-if="item.title != '综合排序' && item.title != '人气排序'"
                >
                  <div
                    class="top"
                    :class="
                      orderByColumn == item.ziduan && isAsc == 'asc'
                        ? 'active'
                        : ''
                    "
                  ></div>
                  <div
                    class="bottom"
                    :class="
                      orderByColumn == item.ziduan && isAsc == 'desc'
                        ? 'active'
                        : ''
                    "
                  ></div>
                </div>
              </div>

              <div class="price-input-box">
                <input type="text" placeholder="最低价" />
                <span>-</span>
                <input type="text" placeholder="最高价" />
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="page-ctx">
        <div class="product-wrap">
          <productList :list="product_list" />
        </div>

        <div class="pagination-box" v-if="count" style="margin-top: 50px">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="count"
            :current-page="pagination.page"
            :page-size="pagination.pageNum"
            @current-change="mix_current_change"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import pageBreadcrumb from "@/components/page/page-breadcrumb.vue";
import productList from "@/components/product/productList.vue"; //

import { mapState } from "vuex";

export default {
  name: "category",
  components: {
    pageBreadcrumb,
    productList,
  },
  data() {
    return {
      banner_list: [],

      product_list: [],
      pagination: {
        page: 1,
        pageNum: 16,
      },
      count: 0,

      //
      id: this.$route.query.id || "",
      useCache: false, // 是否使用缓存

      select_level_1: {}, //所选1级分类
      list_channel: [],
      list_goods: [],
      pages: 1,

      //排序方向 填写 desc 或者 asc 排序字段 填写 字段名称 比如时间就是createTime  阅读量就是 hits
      isAsc: "", //升asc 降序desc
      orderByColumn: "ordering", //选择的排序方式
      sortList: [
        { title: "综合排序", ziduan: "ordering" },
        { title: "人气排序", ziduan: "orders" },
        { title: "价格", ziduan: "priceSale" },
        { title: "销量", ziduan: "orders" },
        { title: "新品", ziduan: "orders" },
      ],

      brand_list: [],
      brand_select: {},
      cate_select: {},
    };
  },
  computed: {
    ...mapState(["vuex_category_flat"]),
    nav_option() {
      let channelId_arr = (this.$route.query.ids || "").split("-");
      let channelId = channelId_arr.pop();

      let cate_info = this.vuex_category_flat.find((v) => v.id == channelId) || {};

      let option = [
        { route: "", title: "产品中心", title: cate_info.title || "" },
      ];
      return option;
    },
  },

  watch: {
    $route() {
      this.pagination.page = 1;
      this.setView();
    },
  },

  created() {
    this.query_banner();
    this.setView();
  },

  methods: {
    query_banner() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "banner_index",
          position: 0,
        },
      }).then((res) => {
        if (res.code == 200) {
          if(res.data[0]){
            this.banner_list = res.data[0].images;
          }
        }
      });
    },

    do_banner_click(item) {
      //console.log({ ...item });
      if (item.url) {
        window.open(item.url, "_blank");
      } else if (item.inventoryId) {
        this.$router.push(
          "/product-detail/" + (item.skuId || item.inventoryId)
        );
      }
    },

    async setView() {
      this.query_product();
    },
    query_product() {
      let channelId_arr = (this.$route.query.ids || "").split("-");
      let channelId = channelId_arr.pop();
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "product_plist",
          ifShowSku: 1,
          channelId: channelId,
          // page: 1,
          // pageNum: 8,
          ...this.pagination,
        },
      }).then((res) => {
        let { code, data, count } = res;
        if (code == 200) {
          let { list, count, pages } = data;
          this.product_list = list;
          this.count = count;
        }
      });
    },

    do_brand_toggle(item) {
      this.brand_select = item;
      this.query_product();
    },

    toDetail(item) {
      this.$router.push(`/product-detail?id=${item.inventoryId}`);
    },

    changePage(page) {
      this.pagination.page = page;
      this.query_product();
    },

    toCate(item) {
      this.$router.push(item.route);
    },

    //切换一级分类
    toggleLevel(item) {
      this.pagination.page = 1;

      this.select_level_1 = item;
      this.query_product();
    },

    //排序方式
    onClickSort(item) {
      if (item.ziduan == this.orderByColumn) {
        this.isAsc = this.isAsc == "asc" ? "desc" : "asc";
      } else {
        this.isAsc = "asc";
      }
      this.orderByColumn = item.ziduan;

      let sortParams = {
        // orderByColumn: this.orderByColumn,
        // isAsc: this.isAsc,

        order1: this.orderByColumn,
        order2: this.orderByColumn != "ordering" ? this.isAsc : "",
      };
      //console.log("排序参数", sortParams);

      this.$parent.set_sortParams(sortParams);
    },

    doPagePrev() {
      if (this.pagination.page > 1) {
        this.pagination.page--;

        this.query_product();
      }
    },
    doPageNext() {
      if (this.pagination.page < this.pages) {
        this.pagination.page++;
        this.query_product();
      }
    },
  },
};
</script>

<style scoped lang="less">
.page {
  background: #ffffff;
  text-align: left;

  .inner {
    width: 1400px;
    margin: 0 auto;
    padding-top: 35px;
    padding-bottom: 100px;

    .page-ctx {
      padding-top: 45px;
    }
  }
}

.banner-box {
  position: relative;
}

.banner-box .lunbo-box {
  position: relative;
  width: 100%;
  height: 318px;

  /deep/ .el-carousel__container {
    height: 318px;
  }

  /deep/ img {
    width: 100%;
    height: 318px;
    cursor: pointer;
  }
}

.filter-box {
  border: 1px solid #ddd;

  .filter-item {
    background: #fafafa;
    display: flex;
    align-items: flex-start;
    border-bottom: 1px solid #ddd;

    &:last-child {
      border-bottom: none;
    }

    .label {
      align-self: center;
      // background: #f8f8f8;
      width: 113px;
      height: auto;
      line-height: auto;
      padding-right: 30px;
      text-align: right;
    }

    .val {
      flex: 1;
      min-height: 46px;
      background: #fff;
      padding: 3px 24px;
      display: flex;
      align-items: center;
    }
  }

  .cate-box {
    display: flex;
    flex-wrap: wrap;

    .cate-item {
      margin-right: 20px;
      font-weight: 400;
      font-size: 14px;
      color: #545454;
      border-radius: 2px 2px 2px 2px;
      padding: 2px 12px;
      font-size: 14px;
      color: #545454;
      cursor: pointer;

      &.active {
        background: #a76737;
        color: #fff;
      }
    }
  }

  .sort-box {
    height: 40px;
    height: auto;
    display: flex;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-size: 14px;
    color: #545454;

    .item {
        display: flex;
          justify-content: center;
          align-items: center;
      height: 40px;
      min-width: 124px;
      border-right: 1px solid #eee;

      padding: 0;
      width: fit-content;
      text-align: center;
      cursor: pointer;

      -webkit-user-select: none;
      -moz-user-select: none;
      -o-user-select: none;
      user-select: none;

      &.active {
        // background: #009F39;
        // color: #fff;
        color: #a76737;
      }

      .text {
      }

      .sanjiao-box {
        margin-left: 5px;

        .top {
          border: 5px solid;
          border-color: transparent;
          border-bottom-color: #aaa;

          &.active {
            border-bottom-color: #009F39;
          }
        }

        .bottom {
          margin-top: 2px;
          border: 5px solid;
          border-color: transparent;
          border-top-color: #aaa;

          &.active {
            border-top-color: #009F39;
          }
        }
      }
    }

    .price-input-box {
      margin-left: 30px;
      input {
        text-align: center;
        padding: 0 10px;
        display: inline-block;
        width: 79px;
        height: 35px;
        background: #ffffff;
        border-radius: 0px 0px 0px 0px;
        border: 1px solid #cccccc;
        font-family: Microsoft YaHei, Microsoft YaHei;
        font-weight: 400;
        font-size: 14px;
        color: #b9b9b9;
      }
      span {
        margin: 0 8px;
      }
    }
  }
}

.page-title {
  margin-top: 20px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 42px;
  padding: 0 20px;
  background: #fff;

  .title-text {
    font-size: 16px;
    color: #333333;
  }

  .title-act {
    display: flex;
    align-items: center;

    .text-1 {
      font-size: 14px;
      color: #333333;

      .num {
        color: #a76737;
      }
    }

    .pagi-box {
      margin-left: 20px;
      margin-right: 10px;
      font-size: 14px;
      color: #333333;

      .num {
        color: #a76737;
      }
    }

    .arrow-box {
      display: flex;
      align-items: center;
      cursor: pointer;

      img {
        width: 24px;
      }
    }
  }
}

.product-list {
  display: flex;
  flex-wrap: wrap;

  .product-item {
    margin-right: 16px;
    margin-top: 16px;
    width: 220px;
    height: 349px;
    background: #ffffff;
    cursor: pointer;

    &:nth-child(6n) {
      margin-right: 0;
    }

    &:nth-child(-n + 6) {
      margin-top: 0;
    }

    &:hover {
      .title {
        color: #009F39 !important;
      }
    }

    .poster-box {
      width: 220px;
      height: 220px;

      .poster {
        width: 220px;
        height: 220px;
      }
    }

    .info-box {
      padding: 13px 15px 0;

      .title {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        font-weight: 400;
        font-size: 14px;
        color: #333333;
      }

      .pirce-box {
        margin-top: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .price-info {
          display: flex;
          align-items: center;

          .price-1 {
            margin-right: 10px;
            font-family: Arial, Arial;
            font-weight: 400;
            font-size: 16px;
            color: #ff3a30;
          }

          .price-2 {
            text-decoration: line-through;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 14px;
            color: #999999;
          }
        }

        .yishou {
          font-weight: 400;
          font-size: 12px;
          color: #999999;
        }
      }

      .act-box {
        margin-top: 15px;
        border-top: 1px solid #ddd;
        padding-top: 5px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .fav-box {
            display: flex;
          justify-content: center;
          align-items: center;
          width: fit-content;
          height: 32px;

          img {
            margin-right: 5px;
            width: 18px;
            height: 18px;
          }
        }

        .cart-box {
            display: flex;
          justify-content: center;
          align-items: center;
          width: 32px;
          height: 32px;

          img {
            width: 32px;
            height: 32px;
          }
        }
      }
    }
  }
}
</style>


<style scoped lang="less" src="@/assets/h5css/mobile/product-cates.less"></style>
